<template>
	<view class="container">
	<!-- 	<uni-nav-bar left-icon="left" right-icon="list" backgroundColor="transparent" :border="false" color="#fff"
			@clickLeft="onClickNavBack" @clickRight="toLog">
			<view #default class="nav-title">能量池</view>
		</uni-nav-bar> -->
		<view class="balance">
			<!-- <view class="value">{{balanceInfo.originalEnergy}}</view>
			<view class="title">可转换绿色能量（个）</view> -->
			<view style="margin-left: 100rpx;color:#fff;">
				<view>
					总投入（个）
				</view>
				<view style="font-weight: 550;font-size:64rpx;">
					{{poolInfo.energyTotal || 0}}
				</view>
			</view>
			<image style="height:380rpx;width:300rpx;margin-left: auto;" class="energyPool" src="@/static/images/hb.png" mode="aspectFit"></image>
		</view>
		<view class="transfer-box">

			<view class="transfer" :style="customStyle">
				<view class="put">
					<view>
						<view class="value">
							{{balanceInfo.originalEnergy || 0}}
						</view>
						<view class="title">
							可投入原始能量（个）
						</view>
					</view>

					<view  v-if="balanceInfo.hzwyOriginalEnergy>0" style="margin-left: auto;width:30%;">
						<view class="value">
							{{balanceInfo.hzwyOriginalEnergy}}
						</view>
						<view class="title">
							原始能量-伟业（个）
						</view>
					</view>
				</view>
				<view class="put">
					<view>
						<view class="title">
							今日收益
						</view>
						<view class="value">
							{{poolInfo.incomeDaily || 0}}
						</view>
					</view>
					<view style="margin-left: auto;width:30%;">
						<view class="title">
							累计收益
						</view>
						<view class="value">
							{{poolInfo.incomeTotal || 0}}
						</view>
					</view>
				</view>
				
			<!-- 	<view class="earnings">
					<view>
						<view class="title">
							今日收益
						</view>
						<view class="value">
							{{poolInfo.incomeDaily || 0}}
						</view>

					</view>
					
				</view> -->
				
				<!-- <view class="rate">
					<text style="color: #EC3218;">*</text>
					<text v-if="transferData.type=='surplus'">转换率：1绿色能量=2元</text>
					<text v-if="transferData.type=='originalEnergy'">转换率：1绿色能量=1原始能量</text>
				</view>
				<view class="get" v-if="getValue>0">
					<view v-if="transferData.type=='surplus'">可获得余额{{transferData.value*2 }}元</view>
					<view v-if="transferData.type=='originalEnergy'">可获得原始能量{{transferData.value}}个</view>

				</view> -->
			</view>
		</view>
		<view style="padding:25rpx;">
			<view style="padding:25rpx;background:rgba(255,255,255,0.9);margin-bottom: 25rpx;border-radius:25rpx;">
				<view class="transfer-value" style="display: flex;align-items: center;">
					<view class="top">
						<view class="title" style="font-weight: 550;">
							开始投入
						</view>
						<!-- <view class="allTransfer" @click="transferData.value=balanceInfo.originalEnergy">
							全部投入
						</view> -->
					</view>
					<view class="content" style="margin-left:auto;">
						<!-- <view class="title-text">
							绿色能量
						</view> -->
						<view class="">
							<input style="font-size: 26rpx;" type="number"
								v-model="transferData.value" placeholder="请输入投入数量（个）" inputmode="decimal"
								placeholder-style="font-size: 26rpx" />
						</view>
					</view>
				</view>
			</view>
			<view style="padding:15rpx;background:rgba(255,255,255,0.9);display: flex;align-items: center;border-radius:25rpx;">
				<view style="font-weight: 550;">投入类型</view>
				<picker  style="margin-left:auto;" @change="bindPickerChange" :value="index" :range="range" mode="selector"
					v-if="balanceInfo.hzwyOriginalEnergy>0">
					<!-- <view class="uni-input">{{range[index]}}</view> -->
					<input style="font-size: 26rpx;margin-top: 15px;"
						placeholder-style="font-size: 26r-px" :value="range[index]" placeholder="请选择投入类型" />
				</picker>
			</view>
			
			
		</view>
		
		
		<button style="background:#950F16;padding:8rpx 0;font-weight:550;" size="default" type="default" class="submit" hover-class="none" @click="submit">投入</button>
	</view>
	<!-- <uni-popup ref="selectPopup" type="center" :mask-click="false" border-radius="10px">底部弹出 Popup 自定义圆角</uni-popup> -->
	<!-- 	<su-dialog :show="selectShow" mode="base"><uni-data-select v-model="value" :localdata="range"
			@change="change"></uni-data-select></su-dialog> -->
	<!-- <uni-data-select v-model="transferData.type" :localdata="range" @change="change"></uni-data-select> -->
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		// computed
	} from 'vue';
	import transferApi from '@/sheep/api/member/transfer'
	import assetApi from '@/sheep/api/member/asset'
	import _ from "lodash";
	const index = ref()
	const range = ["原始能量", "原始能量-伟业"]
	const balanceInfo = ref({})
	//获取余额
	const getBalance = async () => {
		let res = await assetApi.getAssetDetails()
		console.log('获取余额', res)
		// setTimeout(() => {
		if (res.code == 0) {
			balanceInfo.value = res.data
			console.log(balanceInfo.value)
		}

	}
	const poolInfo = ref({})
	const getEnergyPoolInfo = async () => {
		let res = await transferApi.getEnergypoolDetail()
		console.log('获取能量池信息', res)
		if (res.code == 0) {
			poolInfo.value = res.data
		}
	}
	const getText = (type) => {
		switch (type) {
			case 'originalEnergy':
				return '转换原始能量'
				break;
			case 'surplus':
				return '转换余额'
				break;
			default:
				break;
		}
	}
	const bindPickerChange = (e) => {
		console.log('e.detail.value', e.detail.value)
		index.value = e.detail.value
	}
	const submit = async () => {
		if (transferData.value < 1) {
			uni.showToast({
				title: '投入数量不能小于1',
				icon: 'none'
			})
			return
		}
		if (transferData.value == '') {
			uni.showToast({
				title: '请输入投入数量',
				icon: 'none'
			})
			return
		}
		if (balanceInfo.value.hzwyOriginalEnergy > 0) {
			if (transferData.value > balanceInfo.value.hzwyOriginalEnergy) {
				uni.showToast({
					title: '可投入伟业数量不足',
					icon: 'none'
				})
				return
			}
		} else {
			if (transferData.value > balanceInfo.value.originalEnergy) {
				uni.showToast({
					title: '可投入原始数量不足',
					icon: 'none'
				})
				return
			}
		}

		console.log('transferData', transferData)

		if (balanceInfo.value.hzwyOriginalEnergy > 0) {

			if (!index.value && index.value != 0) return uni.showToast({
				title: '请选择投入类型',
				icon: 'none'
			})
			console.log('index.value', index.value);

		}

		let data = {
			type: index.value == 0 ? 'ORIGINAL_ENERGY' : index.value == 1 ? 'HZWY_ORIGINAL_ENERGY' :
				'ORIGINAL_ENERGY',
			value: transferData.value
		}
		throttleSubmit(data)
	}
	const putin = async (data) => {
		let res = await transferApi.getEnergypoolCompound(data)
		console.log('投入', res);
		if (res.code == 0) {
			uni.showToast({
				title: '投入成功',
				icon: 'success'
			})
			setTimeout(() => {
				getBalance()
				getEnergyPoolInfo()
			}, 2000)

		}
	}
	//节流
	const throttleSubmit = _.throttle((data) => putin(data), 1000)

	const onClickNavBack = () => {
		uni.navigateBack()
	}
	const toLog = () => {
		uni.navigateTo({
			url: '/pages/me/components/energyPool_log'
		})
	}
	const customStyle = ref('')
	const getElementStyle = () => {
		const systemInfo = uni.getSystemInfoSync()

		let windowWidth = systemInfo.windowWidth

		let styleObj = {
			width: windowWidth - 2 * 10 + 'px',

		}
		customStyle.value = styleObj
	}
	onShow(() => {
		getBalance()
		getEnergyPoolInfo()
		getElementStyle()
	})
	const transferData = reactive({
		tpye: '',
		value: ''
	})
	onLoad((ops) => {
		console.log('ops', ops);
		// transferData.type = ops.type
	})
</script>

<style lang="scss" scoped>
	page {
		height: auto;
		// background: linear-gradient(to bottom, #2E54DF, #F6F6FA 50%);
		background-image: url('@/static/images/me-bj.png');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.container {
		height: 100vh;
		
		.nav-title {
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-items: center;
			justify-content: center;
			flex: 1;
		}

		.energyPool {
			// width: 50%;
			// aspect-ratio: 1 / 1;
		}

		.balance {
			display: flex;
			align-items: center;
			// margin: 30px 0;
			width:100%;

			.value {
				font-size: 40rpx;
				font-weight: bold;
				color: #fff;
				
			}

			.title {
				font-size: 26rpx;
				color: #fff;
				margin-top: 10px;
			}
		}

		.transfer-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.put {
				display: flex;
				align-items: center;
				// justify-content: space-between;
				padding: 0 10px;
				margin: 10px 0;


			}

			.value {
				font-size: 40rpx;
				font-weight: bold;
				color: #457DF0;
			}

			.title {
				font-size: 24rpx;

				color: #333333;
			}

			.earnings {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 10px;
				margin: 10px 0;

				.value {
					font-size: 24rpx;
					font-weight: bold;
					color: #457DF0;
				}

				.title {
					font-size: 24rpx;
					color: #333333;
				}
			}

			.transfer {
				padding: 20px 10px;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 0.8);
				backdrop-filter: blur(10rpx);
				border-radius: 10px;

				.transfer-value {
					padding: 10px;
					box-sizing: border-box;
					background: #EDF1FF;
					border-radius: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title {
							font-size: 28rpx;
							font-weight: bold;
							margin-bottom: 20px;
						}

						.allTransfer {
							color: #6F99F4;
							font-size: 11px;
							border: 1px solid #6F99F4;
							padding: 2px 5px;
							box-sizing: border-box;
							border-radius: 50px;

						}
					}

					.content {
						.title-text {
							color: black;
							font-size: 13px;
							margin: 10px 0 20px 0;

						}
					}
				}

				.rate {
					margin: 8px 0;
					font-size: 11px;
				}

				.get {
					font-size: 12px;
					font-weight: 550;
					padding: 15px 10px;
					background: #EDF1FF;
					border-radius: 10px;
				}
			}
		}

		.submit {
			margin-top: 30px;

			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40px;
			color: #ffffff;
			background: #457CF0;
			width: 70%;
			border-radius: 50px;
			box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.2)
		}
	}
</style>